<template>
    <el-dialog v-model="show" title="申请预付款退款" width="35%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="所属公司：">
                        {{ props.initList.companyName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户名称：">
                        {{ props.initList.customerName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="预付款金额：">
                        ￥ {{ props.initList.advanceAmount }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="申请退款金额:" prop="applyRefundAmount">
                        <el-input v-model.number="ruleForm.applyRefundAmount" placeholder="请输入申请退款金额" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="申请理由:" prop="applyReason">
                        <el-input v-model="ruleForm.applyReason" placeholder="请输入申请理由" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" v-loading="loading" @click="handleSubmit(ruleFormRef)">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { addAdvanceChargeRefundApplyApi } from '@/api/sj/financialManagement/advancePaymentManagement'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'type']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);
const loading = ref(false);


watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

interface RuleForm {
    applyRefundAmount: number | null
    applyReason: string
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    applyReason: '',
    applyRefundAmount: null,
})

const rules = reactive<FormRules>({
    applyRefundAmount: [
        { required: true, message: '请输入申请退款金额', trigger: 'blur' },
        { type: 'number', min: 0, message: '请输入数字', trigger: 'blur' }
    ],
});

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            loading.value = true;
            try {
                const { code } = await addAdvanceChargeRefundApplyApi({
                    advanceChargeId: props.initList.id,
                    ...ruleForm,
                })
                if (code == 200) {
                    proxy?.$modal.msgSuccess('操作成功');
                    emits('submit', true);
                    loading.value = false;
                    handleClose();
                }
            } catch (error) {
                loading.value = false;
            }
        } else {
            console.log('error submit!', fields)
        }
    })
};


const handleClose = () => {
    ruleFormRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
    padding: 0px 4px !important;
    height: 100px !important;
    width: 260px;
}

::v-deep .el-divider--horizontal {
    margin: 12px 0;
}
</style>